<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>发个东西 - 局域网文字/文件P2P传输工具</title>
  <script src="./xchatuser.js?v=20"></script>
  <link rel="stylesheet" href="./style.css?v=20">
</head>
<body>
  <div class="dragtip">
    <h1>松开发送文件</h1>
  </div>
  <div class="left">
    <div class="chat-wrapper">
    </div>
    <div class="toolbar">
      <div class="toolbar-left">
        <button class="toolbar-btn nickname-btn" title="设置昵称">
          <svg viewBox="0 0 24 24" width="20" height="20">
            <path fill="currentColor" d="M12 6c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2m0 10c2.7 0 5.8 1.29 6 2H6c.23-.72 3.31-2 6-2m0-12C9.79 4 8 5.79 8 8s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm0 10c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>
          </svg>
        </button>
        <button class="toolbar-btn file-btn" title="发送文件">
          <svg viewBox="0 0 24 24" width="20" height="20">
            <path fill="currentColor" d="M16.5 6v11.5c0 2.21-1.79 4-4 4s-4-1.79-4-4V5c0-1.38 1.12-2.5 2.5-2.5s2.5 1.12 2.5 2.5v10.5c0 .55-.45 1-1 1s-1-.45-1-1V6H10v9.5c0 1.38 1.12 2.5 2.5 2.5s2.5-1.12 2.5-2.5V5c0-2.21-1.79-4-4-4S7 2.79 7 5v12.5c0 3.04 2.46 5.5 5.5 5.5s5.5-2.46 5.5-5.5V6h-1.5z"/>
          </svg>
        </button>
      </div>
      <div class="toolbar-right">
        <button class="toolbar-btn toggle-users-btn mobile-only" title="切换在线用户列表">
          <svg viewBox="0 0 24 24" width="20" height="20">
            <path fill="currentColor" d="M16,13C15.71,13 15.38,13 15.03,13.05C16.19,13.89 17,15 17,16.5V19H23V16.5C23,14.17 18.33,13 16,13M8,13C5.67,13 1,14.17 1,16.5V19H15V16.5C15,14.17 10.33,13 8,13M8,11A3,3 0 0,0 11,8A3,3 0 0,0 8,5A3,3 0 0,0 5,8A3,3 0 0,0 8,11M16,11A3,3 0 0,0 19,8A3,3 0 0,0 16,5A3,3 0 0,0 13,8A3,3 0 0,0 16,11Z"/>
          </svg>
        </button>
        <button class="toolbar-btn send-btn" title="发送消息">
          <svg viewBox="0 0 24 24" width="20" height="20">
            <path fill="currentColor" d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/>
          </svg>
        </button>
      </div>
    </div>
    <textarea id="messageInput" class="txt-msg" onkeydown="enterTxt(event)"></textarea>
  </div>
  <div class="right">
    <ul id="users">
    </ul>
  </div>

  <div class="mobile-overlay"></div>

  <div class="modal" id="userSelectModal">
    <div class="modal-content">
      <h3>选择接收用户</h3>
      <div class="user-list" id="userSelectList">
      </div>
      <div class="progress-container" style="display: none;">
        <div class="progress-text">正在发送...</div>
        <div class="progress-bar">
          <div class="progress-bar-inner"></div>
        </div>
      </div>
      <div class="modal-footer">
        <button onclick="cancelSendFile()">取消</button>
        <button onclick="confirmSendFile()">发送</button>
      </div>
    </div>
  </div>

  <div class="modal" id="nicknameModal">
    <div class="modal-content">
      <h3>设置昵称</h3>
      <div class="nickname-input-container">
        <input type="text" id="nicknameInput" maxlength="10" placeholder="请输入昵称（最多10个字符）">
      </div>
      <div class="modal-footer">
        <button onclick="closeNicknameModal()">取消</button>
        <button onclick="saveNickname()">保存</button>
      </div>
    </div>
  </div>

  <div class="modal" id="passwordModal">
    <div class="modal-content">
      <h3>请输入房间密码</h3>
      <div class="nickname-input-container">
        <input type="password" id="roomPasswordInput" placeholder="请输入密码" autocomplete="off" name="password_fake">
      </div>
      <div class="modal-footer">
        <button onclick="submitRoomPassword()">确认</button>
      </div>
    </div>
  </div>

  <!-- 房间管理模态框 -->
  <div class="modal" id="roomModal">
    <div class="modal-content">
      <h3>房间管理</h3>
      <ul id="roomList"></ul>
      <br>
      <!-- 新增房间部分 -->
      <div class="room-input-container">
        <input type="text" id="newRoomId" placeholder="房间ID">
        <input type="password" id="newRoomPwd" placeholder="房间密码">
      </div>
      <div class="modal-footer">
        <button onclick="closeRoomModal()">取消</button>
        <button onclick="addRoom()">新增房间</button>
      </div>
    </div>
  </div>

  <!-- 编辑房间模态框 -->
  <div class="modal" id="editRoomModal">
    <div class="modal-content">
      <h3>编辑房间</h3>
      <div class="room-input-container">
        <input type="text" id="editRoomId" disabled> <!-- 房间ID不可修改 -->
        <input type="password" id="editRoomPwd" placeholder="新密码">
      </div>
      <div class="modal-footer">
        <button onclick="closeEditModal()">取消</button>
        <button onclick="saveEditedRoom()">保存修改</button>
      </div>
    </div>
  </div>


  <script src="./index.js?v=20"></script>
</body>
</html>
